<template>
  <div style="background: #ececec; padding: 15px;">
    <a-card  :bordered="false" class="card_Content">
      <h1>上传安装包资源</h1>
      <a-form
      v-bind="formItemLayout"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="horizontal"
    :disabled="componentDisabled"
    ref="formRef"
    :rules="rules"
    style="max-width: 800px"
  >
    <a-form-item label="上传安装包">
      <a-upload action="/upload.do" list-type="picture-card" >
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px;">上传apk</div>
        </div>
      </a-upload>
      <i>仅支持上传1个apk包（32位、64位或32位/64位兼容包）；</i>
    </a-form-item>
    <a-form-item label="视频标题" ref="title"  name="name">
      <a-input placeholder="请输入20字以内的视频标题" />
    </a-form-item>
    <a-form-item label="封面图">
      <a-upload action="/upload.do" list-type="picture-card">
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px">点击或者拖拽上传上传apk</div>
        </div>
      </a-upload>
      <i>① 请上传1张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
        ② 支持JPG、PNG格式</i>
    </a-form-item>
    <a-form-item label="游戏视屏">
      <a-upload action="/upload.do" list-type="picture-card">
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px">点击或者拖拽上传</div>
        </div>
      </a-upload>
      <i>① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
        ② 支持JPG、PNG格式</i>
    </a-form-item>
    <a-form-item label="电子版授权证书（选填）">
      <a-upload action="/upload.do" list-type="picture-card">
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px">点击或者拖拽上传</div>
        </div>
      </a-upload>
      <i>① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
        ② 支持JPG、PNG格式</i>
    </a-form-item>
    <a-form-item label="资源证明">
      <a-upload action="/upload.do" list-type="picture-card">
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px">点击或者拖拽上传</div>
        </div>
      </a-upload>
      <i>① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
        ② 支持JPG、PNG格式</i>
    </a-form-item>
    <!-- <a-form-item label="隐私政策">
      <a-checkbox>checkbox</a-checkbox>
    </a-form-item> -->
    <a-form-item label="隐私政策" v-bind="formTailLayout">
      <a-radio-group v-model:value="radioValue1">
        <a-radio value="apple">输入URL
          <a-input placeholder="请输入20字以内的视频标题" />
        </a-radio>
        <a-radio value="pear">输入文本内容
          <a-input placeholder="请输入20字以内的视频标题"/>
          <i>查看规范</i>
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="发布类型">
      <a-radio-group v-model:value="radioValue">
        <a-radio value="apple">审核通过后立即发布</a-radio><a-input placeholder="请输入20字以内的视频标题"/>
        <a-radio value="pear">定时发布
          <a-date-picker />
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      :wrapperCol="{ span: 24 }"
      style="text-align: center"
    >
      <a-button htmlType="submit" style="margin-right: 16px; background-color: rgba(76, 200, 126, 1);" type="primary" @click="onSave">保存并提交</a-button>
      <a-button style="margin-left: 8px" @click="cancel">取消保存</a-button>
    </a-form-item>
  </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
// const componentDisabled = ref(true);
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const rules = {
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 3 to 5',
      trigger: 'blur',
    },
  ],
}
const radioValue = ref('apple');
const treeData = reactive([
  {
    title: 'Light',
    value: 'light',
    children: [
      {
        title: 'Bamboo',
        value: 'bamboo',
      },
    ],
  },
]);
const options = reactive([
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
      },
    ],
  },
]);
const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 8,
  },
};
const formTailLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
    offset: 4,
  },
};
const checked = ref(false);

 const onSave=() => {
  console.log(1111);
}



</script>

<style lang="less" scoped>
.card_Content{
  padding: 0 0 0 172px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #3C3C3C;
  h1{
    height: 48px;
    text-align: center;
    font-weight:bolder;
  }
}
.footer_content{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>